<template>
    <el-card shadow="never" class="aui-card--fill">
      <div class="mod-wh__ishotelhomestay">
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
        >
            <el-form-item>
                <el-input
                    v-model="dataForm.nameIsland"
                    placeholder="区域名称"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                    v-model="dataForm.parkadeName"
                    placeholder="停车场名称"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                    v-model="dataForm.coordinate"
                    placeholder="停车场地址"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">{{ $t("query") }}</el-button>
            </el-form-item>
            <el-form-item>
                <el-button
                v-if="$hasPermission('data:isfeenorm:add')"
                type="primary"
                @click="addOrUpdateHandle()"
                >{{ $t("add") }}</el-button
                >
            </el-form-item>
            <el-form-item>
                <el-button
                v-if="$hasPermission('data:isfeenorm:delete')"
                type="danger"
                @click="deleteHandle()"
                >{{ $t("deleteBatch") }}</el-button
                >
            </el-form-item>
        </el-form>
        <el-table
          v-loading="dataListLoading"
          :data="dataList"
          border
          @selection-change="dataListSelectionChangeHandle"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="nameIsland"
            label="区域名称"
            header-align="center"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="parkadeName"
            label="停车场名称"
            header-align="center"
            align="center"
            width="200"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="coordinate"
            label="停车场地址"
            header-align="center"
            align="center"
            width="280"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="eachAllParking"
            label="车位总数"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="unusedParkingSpace"
            label="剩余车位数"
            header-align="center"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="unusedParkingSpace"
            label="停车数量"
            header-align="center"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.eachAllParking-scope.row.unusedParkingSpace }}
            </template>
          </el-table-column>
          <el-table-column
            prop="chargeStandard"
            label="停车价格"
            header-align="center"
            align="center"
            width="260"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="longitude"
            label="经度"
            header-align="center"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="latitude"
            label="纬度"
            header-align="center"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            :label="$t('handle')"
            fixed="right"
            header-align="center"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-button
                v-if="$hasPermission('data:isfeenorm:update')"
                type="text"
                size="small"
                @click="addOrUpdateHandle(scope.row.id)"
                >{{ $t("update") }}</el-button
              >
              <el-button type="text" size="small" @click="viewHandle(scope.row)"
                >查看</el-button
              >
              <el-button
                v-if="$hasPermission('data:isfeenorm:delete')"
                type="text"
                size="small"
                @click="deleteHandle(scope.row.id)"
                >{{ $t("delete") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        >
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update
          :disabled="disabled"
          v-if="addOrUpdateVisible"
          ref="addOrUpdate"
          @refreshDataList="getDataList"
          @changeDisabled="disabled = false"
        ></add-or-update>
      </div>
    </el-card>
  </template>
  
  <script>
  import mixinViewModule from "@/mixins/view-module";
  import AddOrUpdate from "./isparklist-add-or-update";
  export default {
    mixins: [mixinViewModule],
    data() {
      return {
        disabled: false,
        mixinViewModuleOptions: {
          getDataListURL: "/travel/car/wharfStopParkade/page",
          getDataListIsPage: true,
          deleteURL: "/travel/car/wharfStopParkade",
          deleteIsBatch: true,
        },
        dataForm: {},
      };
    },
    watch: {
      "dataForm.status": {
        immediate: true,
        deep: true,
        handler(newValue) {},
      },
    },
    components: {
      AddOrUpdate,
    },
    created() {
      this.$http
        .get("/travel/car/wharfStopParkade/page", {
          params: {
            page: 1,
            limit: 10,
          },
        })
        .then(({ data: res }) => {
        });
    },
    methods: {
      viewHandle(row) {
        this.addOrUpdateVisible = true;
        this.disabled = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.visible = true;
  
          this.$refs.addOrUpdate.dataForm.id = row.id;
          this.$refs.addOrUpdate.dataForm.details=true;
          this.$refs.addOrUpdate.init()
        });
      },
    },
  };
  </script>
  